<!DOCTYPE html>
<html>
	<head>
		<title><?php echo lang('site_title');?></title>
		<meta name="viewport" content="initial-scale=1.0">
		<meta charset="utf-8">

		<link type="text/css" href="<?php echo base_url();?>static/css/google_map.css" />

		<script type="text/javascript" src="<?php echo base_url();?>static/js/jquery.js"></script>

		<script async defer src="https://maps.googleapis.com/maps/api/js?key=<?php echo $google_ak;?>&callback=googleMap.processor"></script>

	</head>
	<body>
		<h1><?php echo $title; ?></h1>
		
		<div id="map" class="mapContainer" style="height: 400px;"></div>


		<script type="text/javascript">

			var googleMap = {};
			googleMap.mapHandle = null;
			googleMap.container = document.getElementsByClassName("mapContainer")[0];
			googleMap.points = {
				init: {lat: 41.85, lng: -87.65},
				
			};
			googleMap.options = {
				init: {
					center: googleMap.points.init,
					zoom: 7
				},

			};

			googleMap.processor = function() {
				this.init();
				this.pickerListener();
			};

			googleMap.init = function() {
				this.mapHandle = new google.maps.Map(this.container, this.options.init);
				this.infoWindow = new google.maps.InfoWindow();


				return this;
			};

			

			googleMap.createMarker = function(location) {
				var marker = new google.maps.Marker({
					map: this.mapHandle,
					position: location
				});

				google.maps.event.addListener(marker, "click", function() {
					var url = "<?php echo $baseUrl;?>" + location.lat() + "," + location.lng();
					window.open(url);
				});
			};

			googleMap.pickerListener = function() {
				googleMap.mapHandle.addListener("click", function(event){
					var location = event.latLng;
					googleMap.createMarker(location);
				});
			};
			


		</script>






	</body>
</html>
